<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Bristleback Chat</title>
  <link rel="stylesheet" type="text/css" href="styles.css"/>

  <script type="text/javascript" src="js/jWebSocket.js">  <!--//--></script>
  <script type="text/javascript" src="js/jquery-1.4.2.min.js"><!--//--></script>
  <script type="text/javascript" src="js/bristle.js"><!--//--></script>

  <script type="text/javascript">
    var connector = new Bristle.BaseConnector();


    $(document).ready(function() {
      connect();
      addGUIListeners();
      $("#userameField").focus();
    });

    function connect() {

      connector.openConnection(
      {
        developmentConsole : false,
        serverUrl : "ws://localhost:9788",
        OnOpen : function() {

        },
        OnClose: function() {
          $(".disconnectedDiv").removeClass("hidden");
          $(".sendMessage").addClass("hidden");
          $(".loginBox").addClass("hidden");
          $(".users").addClass("hidden");
          $(".messages").addClass("hidden");
        }
      }
        );
    }

    function showNotSupportedMsg() {
      var lMsg = jws.MSG_WS_NOT_SUPPORTED;
      alert(lMsg);
    }

    connector.actions.sendText = connector.actions.define("sendText").addParams("text", "isFinished").create();


    function sendTextAndClear() {
      var textInput = $("#messageText");
      connector.actions.sendText(textInput.val(), true);
      textInput.val("");
    }

    function getUsersList() {
      connector.requestAction("CONNECTION_STARTED_ACTION_NAME");
    }


    EventHandler.add("listOfUsers", function(params) {
      var usersList = $(".users");
      usersList.empty();
      for (var user in params.users) {
        usersList.append("<li>" + Bristle.escapeHTML(params.users[user].name) + "<div class=\"instantMsg\" id=\"" + params.users[user].id + "\"></div></li>")
      }
    });

    EventHandler.add("newText", function(params) {
      var messages = $(".messages");
      messages.append("<li><span>" + Bristle.escapeHTML(params.username) + ": </span>" + Bristle.escapeHTML(params.text) + "</li>");
      var chatFrame = $(".chatFrame");
      chatFrame.attr("scrollTop", chatFrame.attr("scrollHeight"));

      var userOnList = $("#" + params.id);
      userOnList.empty();

    });

    EventHandler.add("partialText", function(params) {
      var userOnList = $("#" + params.id);
      userOnList.empty();
      if (params.text !== "") {
        userOnList.append("<table><tr><td><img src=\"ajax-loader.gif\"></td><td>" + Bristle.escapeHTML(params.text) + "</td></tr></table>");
      }
    });

    EventHandler.add("LOG_IN", function(params) {
      var messages = $(".messages");
      messages.append("<li><span>" + Bristle.escapeHTML(params.username) + " has joined chat </span></li>");
    });

    function scrollDownChat() {
      var chatFrame = $(".chatFrame");
      chatFrame.attr("scrollTop", chatFrame.attr("scrollHeight"));
    }

    function addGUIListeners() {
      $("#userameField").keyup(function(e) {
        if (e.keyCode == 13) {
          $("#loginButton").click();
        }
      });

      $("#loginButton").click(function() {
        var username = $("#userameField").val();
        var callback = {
          onSuccess: function(params) {
            $(".loginBox").addClass("hidden");
            $(".sendMessage").removeClass("hidden");
            var messages = $(".messages");
            messages.append("<li><span>" + Bristle.escapeHTML(params.username) + " has joined chat </span></li>");
            scrollDownChat();
            $("#messageText").focus();
          },
          onFailure: function(error) {
            if (error.isValidationException()) {
              $("#userNameErrorDiv")
                .html("<span class='validationError'>Username required</span>");
              $("#userameField").css("border-color", "red");

            } else {
              $("#userNameErrorDiv")
                .html("<span class='validationError'>User already exist, choose other nickname</span>");
              $("#userameField").css("border-color", "red");
            }
            var exceptionType = error.getExceptionType();

          }
        };
        connector.requestAction("LOG_IN", {name: username}, callback);
      });

      $("#sendMessage").click(function() {
        sendTextAndClear();
      });

      $("#messageText").keyup(function(e) {
        if (e.keyCode == 13) {
          sendTextAndClear();
        } else {
          var textValue = $("#messageText").val();
          connector.actions.sendText(textValue, false);
        }
      });

      $("#logout").click(function() {
        connector.requestAction("CONNECTION_STOPPED_ACTION_NAME");
        connector.closeConnection();
        $(".disconnectedDiv").removeClass("hidden");
        $(".sendMessage").addClass("hidden");
        $(".users").addClass("hidden");
        $(".messages").addClass("hidden");
      })
    }

  </script>
</head>

<body>

<div class="contentWrapper">
  <h3>Bristleback real time chat</h3>

  <div class="mainContent">
    <div class="chatContentBox">

      <div class="outer">
        <div class="leftBar">
          <div class="chatFrame">
            <ul class="messages">

            </ul>
          </div>
          <div class="sendMessageFrame">
            <div class="loginBox">
              <div id="userNameErrorDiv"></div>
              <label for="userameField">Nickname:</label>
              <input type="text" name="username" id="userameField">

              <div id="loginButton" class="fancyButton fancyButtonFixedSize">Join chat</div>
            </div>
            <div class="clear"></div>
            <div class="sendMessage hidden">
              <input type="text" name="messageText" id="messageText">

              <div id="sendMessage" class="fancyButton fancyButtonMediumSize">Send</div>
              <div id="logout" class="fancyButton fancyButtonMediumSize" style="margin-left: 48px;">Logout</div>
              <div class="clear"></div>
            </div>

            <div class="disconnectedDiv hidden">
              <h4 style="font-family:verdana, sans-serif;">Disconnected from the server</h4>

              <h4 style="font-family:verdana, sans-serif;">Press F5 to connect again.</h4>
            </div>
          </div>
        </div>
        <div class="rightBar">
          <ol class="users">

          </ol>
        </div>
        <div class="clear"></div>
      </div>
    </div>

    <div class="descriptionBox">
      <h4 style="font-family:verdana, sans-serif; text-align:center;">Description</h4>

      <ol class="descriptionDivTableOfContent">
        <li class="descriptionDivTableOfContentElement">
          <span>Summary</span>

          <p>This sample application demonstrates usage of Brisleback plugin in chat application. Each written character
            is
            directly send to all chat users. You can see how user is writing message under nickname on users list.</p>
        <li class="descriptionDivTableOfContentElement">
          <span>How it works</span>

          <ol class="howItWorksDescription">
            <li>Data typed by user is send to server, server processes data and broadcast it back to all logged in
              users.
              <p><a href="http://code.google.com/p/bristleback/wiki/Binding">More about binding - client side</a></p>
            </li>
            <li>
              When new user logs in, all chat participants are notified, list is updated
            </li>
            <li>
              Every written data is directly send to server, processed and send to all users, so you see every typed
              character.
            </li>
          </ol>
        </li>
        <li class="descriptionDivTableOfContentElement">
          <span>Sources</span>

          <p><a href="http://code.google.com/p/bristleback/source/browse/#svn%2Ftrunk%2Fexamples%2FBristleChat">svn
            repo</a>
          </p>
        </li>
        <li class="descriptionDivTableOfContentElement">
          <span>Authors</span>

          <p>Bristleback plugin team</p></li>
        <li class="descriptionDivTableOfContentElement">
          <span>Website</span>

          <p><a href="http://bristleback.googlecode.com">bristleback.googlecode.com</a></p>
        </li>
      </ol>
    </div>
  </div>
</div>


</body>
</html>